<template>
  <div class="root">
    <div class="list">
      <div>
        <span class="title">SAM</span>
        <br />
        <div class="li">工作</div>
        <div class="li">安全提示</div>
      </div>
      <div>
        <span class="title">媒体</span>
        <br />
        <div class="li">新闻资料袋</div>
        <div class="li">资讯</div>
      </div>
      <div>
        <span class="title">联系我们</span>
        <br />
        <div class="li">常见问题</div>
        <div class="li">客户服务</div>
        <div class="li">合作伙伴</div>
        <div class="li">媒体查询</div>
      </div>
      <div>
        <span class="title">角色</span>
        <br />
        <div class="li">个人零售</div>
        <div class="li">企业销售</div>
      </div>
    </div>
    <div>
      <input
        type="text"
        placeholder="Enter your email here ( 必填 )"
        ismust="1"
        isref="searchKeyword"
        datareg="LEN"
        class="input"
      />
      <button type="button" class="submit">提交</button>
    </div>
    <div class="footerPaletteContent">
      <div class="content one">法律声明</div>
      <div class="content">隐私政策</div>
      <div class="content">购物付款类型</div>
      <div class="content">支付方式</div>
      <div class="content">产品售后与申诉</div>
      <div class="content">服务投诉与申诉</div>
      <div class="content">关于SAM</div>
      <div class="content">知识产权维护女</div>
    </div>
    <div class="copyright">
      <p>
        <span>本网站使用Vue.js技术和微服务技术开发</span>
        &nbsp;&nbsp;Copyright&nbsp;&nbsp;©2020&nbsp;&nbsp;
        网站域名&nbsp;&nbsp;版权所有&nbsp;&nbsp;
      </p>
    </div>
  </div>
</template>

<style lang="scss" scoped>
$listWidth: 13%;
$listHeight: 60%;
$listMargin: 5% 0 0 0;
$liMargin: 7.5% 0 0 0;
$inputMargin: 5% 0 0 2%;
$inputWidth: 34%;
$submitWidth: 17%;
$submitMargin: 2% 0 0 10%;

$footMargin: 5.5% 0 0 0;
$footHeight: 30%;

$contentPadding: 0 1% 0 1%;
$contentHeight: 18%;
$oneMargin: 7% 0 0 13%;
$contentMargin: 7% 0 0 0;

$copyrightWidth : 78%;
.root {
  height: 400px;
  // border: 1px solid red;
 // margin-top : 100%;
  .list {
    div {
      float: left;
      //border: 1px solid green;
      width: $listWidth;
      height: $listHeight;
      margin: $listMargin;
      .title {
        font-family: 微软雅黑;
        font-size: 14px;
        color: rgb(51, 51, 51);
        background-color: rgba(255, 255, 255, 0);
        font-weight: 700;
        font-style: normal;
        text-decoration: none;
        letter-spacing: 0px;
        line-height: normal;
        text-shadow: none;
      }
      .li {
        cursor: pointer;
        font-family: 微软雅黑;
        font-size: 14px;
        color: rgb(51, 51, 51);
        background-color: rgba(255, 255, 255, 0);
        // font-weight: 700;
        font-style: normal;
        text-decoration: none;
        letter-spacing: 0px;
        line-height: normal;
        text-shadow: none;
        margin: $liMargin;
        float: none;
        width: 100%;
      }
    }
  }
  .input {
    width: $inputWidth;
    margin: $inputMargin;
    font-size: 14px;
    border-width: 1px;
    font-weight: normal;
    font-family: 黑体;
    font-style: normal;
    color: rgb(55, 59, 77);
    height: 40px;
    border-radius: 0px;
    background-color: rgb(255, 255, 255);
    border-color: rgb(55, 59, 77);
  }
  .submit {
    width: $submitWidth;
    margin: $submitMargin;
    border-style: solid;
    border-width: 0px;
    border-color: rgb(55, 59, 77);
    font-size: 14px;
    font-weight: normal;
    font-family: 黑体;
    font-style: normal;
    color: rgb(255, 255, 255);
    height: 40px;
    line-height: 40px;
    border-radius: 0px;
    background-color: rgb(51, 51, 51);
    cursor: pointer;
  }
  .footerPaletteContent {
    height: $footHeight;
    margin: $footMargin;
    // border: 1px solid red;
    .content {
      float: left;
      height: $contentHeight;
      border-top-style: none;
      border-right-style: solid;
      border-bottom-style: none;
      border-left-style: none;
      border-color: black;
      font-size: 12px;
      color: #5e5e5e;
      cursor: pointer;
      pointer-events: all;
      text-align: center;
      line-height: 150%;
      margin: $contentMargin;
      border-width: 1px;
      padding: $contentPadding;
    }
    .one {
      margin: $oneMargin;
      border-left-style: solid;
    }
  }
  .copyright {
    width: $copyrightWidth;
    p {
      text-align: center;
      font-size: 12px;
      color: #5e5e5e;
    }
  }
}
</style>